﻿<!DOCTYPE html />
<html>
<head>
    <!-- Loaded files-->
    <!--TODO:Include jquery ui code as additional files-->
    <style type="text/css">
        @import "styles/guestpage.css";
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
    </script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js">
    </script>
    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/cupertino/jquery-ui.css"
        rel="Stylesheet" />
    <script type="text/javascript">
        function hoveredImage() {
        }
    </script>
    <script>
        $(function () {
            var usersBase = [
                            "pesh0hack",
                            "steffy",
                            "ivanPetrov"

		                        ];
            $("#userTags").autocomplete({
                source: usersBase
            });
        });
    </script>
    <title>Photo Album Guest Page</title>
</head>
<body>
    <header class="topmenu">
        <div class="Enheim">
            <span id="Enheim">Enheim</span> <span id="gallery">gallery</span>
        </div>
        <a href="">Home</a>
        <a href="" id="signUpButton">Sign up</a>
    </header>
    <script type="text/javascript">
        $(function () {
            $("#dropMenu").accordion();
        });
    </script>
    <div id="arena">
        <nav id="dropMenu">
            <h4>
                <a href="#">Randoms</a></h4>
            <div id="randoms">
                <p>
                    <ul>
                        <li><a class="" href="">Random Photo</a> </li>
                        <li><a class="" href="">Random Gallery</a> </li>
                    </ul>
                </p>
            </div>
            <h4>
                <a href="#">Statistics</a></h4>
            <div id="statistics">
                <p>
                    <ul>
                        <li><a class="" href="">User Activity</a> </li>
                        <li><a class="" href="">Photo Uploads</a> </li>
                    </ul>
                </p>
            </div>
            <h4>
                <a href="#">Find User</a></h4>
        </nav>
        <script type="text/javascript">
            $(function () {
                $("#tabbedContent").tabs();
            });
        </script>
        <section id="contentDiv">
            <div id="tabbedContent">
                <ul>
                    <li><a href="#randomGallery">Ivan Petrov's Landscapes </a></li>
                    <li><a href="#userActivity">User Activity</a></li>
                    <li><a href="#photoUploads">Photo Uploads</a></li>
                    <li><a href="#randomPhoto">steffy's Прекрасно слънце</a></li>
                    <li><a href="#findUser">Find User</a></li>
                </ul>
                <div id="randomGallery">
                    <div class="categoryPresentation">
                        <table>
                            <tr class="elementsRow">
                                <!--
                           --Pattern Photo
                               <td class="thumbnailElement">
                               <img src="" width="200px" height="130px"/>
                               <br />
                               <a href="">Image Name</a>
                               </td>
                           --Pattern Category
                       -->
                                <td class="thumbnailElement">
                                    <img src="images/IvanPetrov/Landscapes/Sea Landscape.JPG" width="200px" height="130px" />
                                    <br />
                                    <a href="">Sea Landscape</a>
                                </td>
                                <td class="thumbnailElement">
                                    <img src="images/IvanPetrov/Landscapes/Silistar.jpg" width="200px" height="130px" />
                                    <br />
                                    <a href="">Silistar</a>
                                </td>
                                <td class="thumbnailElement">
                                    <img src="images/IvanPetrov/Landscapes/Shipka.JPG" width="200px" height="130px" />
                                    <br />
                                    <a href="">Shpka</a>
                                </td>
                                <td class="categoryElement">
                                    <img src="images/folderBack.png" width="150px" height="100px" />
                                    <br />
                                    <a href="">London Landscapes</a>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div id="userActivity" class="statisticsTable">
                    <table cellpadding="0" cellspacing="0" border="0">
                        <thead>
                            <tr>
                                <td>
                                    Username
                                </td>
                                <td>
                                    Categories
                                </td>
                                <td>
                                    Photos
                                </td>
                                <td>
                                    Latest Activity Date
                                </td>
                                <td>
                                    Description
                                </td>
                            </tr>
                        </thead>
                        <tbody>
                            <!--Controller will fill with data-->
                            <!--Pattern Example
                    <tr>
                          <td>ivanPetrov</td> 
                          <td>3</td>
                          <td>7</td>
                          <td>21-01-2012</td>
                          <td>Added Photo</td>
                      </tr>
                   -->
                            <tr>
                                <td>
                                    ivanPetrov
                                </td>
                                <td>
                                    3
                                </td>
                                <td>
                                    7
                                </td>
                                <td>
                                    21-01-2012
                                </td>
                                <td>
                                    Added Photo
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    steffyDSLR
                                </td>
                                <td>
                                    1
                                </td>
                                <td>
                                    4
                                </td>
                                <td>
                                    18-01-2012
                                </td>
                                <td>
                                    Added Category
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    pesh0Hack
                                </td>
                                <td>
                                    2
                                </td>
                                <td>
                                    4
                                </td>
                                <td>
                                    17-01-2012
                                </td>
                                <td>
                                    Added Category
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div id="photoUploads" class="statisticsTable">
                    <table cellpadding="0" cellspacing="0" border="0">
                        <thead>
                            <tr>
                                <td>
                                    Photo
                                </td>
                                <td>
                                    Category
                                </td>
                                <td>
                                    Owner
                                </td>
                                <td>
                                    Added Date
                                </td>
                                <td>
                                    Dimensions
                                </td>
                                <td>
                                    File Size
                                </td>
                                <td>
                                    Last Seen
                                </td>
                            </tr>
                        </thead>
                        <tbody>
                            <!--Controller will fill with data-->
                            <tr>
                                <td>
                                    Sea Landscape
                                </td>
                                <td>
                                    Landscapes
                                </td>
                                <td>
                                    ivanPetrov
                                </td>
                                <td>
                                    22-01-2012
                                </td>
                                <td>
                                    1024x768
                                </td>
                                <td>
                                    1 MB
                                </td>
                                <td>
                                    23-01-2012
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Silistar
                                </td>
                                <td>
                                    Landscapes
                                </td>
                                <td>
                                    ivanPetrov
                                </td>
                                <td>
                                    22-01-2012
                                </td>
                                <td>
                                    1024x768
                                </td>
                                <td>
                                    1.3 MB
                                </td>
                                <td>
                                    23-01-2012
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Shipka
                                </td>
                                <td>
                                    Landscapes
                                </td>
                                <td>
                                    ivanPetrov
                                </td>
                                <td>
                                    22-01-2012
                                </td>
                                <td>
                                    1024x768
                                </td>
                                <td>
                                    1.4 MB
                                </td>
                                <td>
                                    24-01-2012
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Barcelona
                                </td>
                                <td>
                                    pesh0hack
                                </td>
                                <td>
                                    pesh0hack
                                </td>
                                <td>
                                    24-01-2012
                                </td>
                                <td>
                                    1024x768
                                </td>
                                <td>
                                    1.1 MB
                                </td>
                                <td>
                                    23-01-2012
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div id="randomPhoto">
                    <img src="images/steffy/Прекрасно слънце.JPG" width="=800px" height="500px" />
                </div>
                <div id="findUser">
                    <label for="findUser">
                        Find user:
                    </label>
                    <br />
                    <input id="userTags">
                    <button id="viewContent">
                    View Content
                    </button>
                </div>
            </div>
        </section>
    </div>
</body>
</html>
